import React, { Component } from 'react';
import Footer from '../../common/compont/Footer';
// import Header from '../../common/compont/Header';
import Header from './header/Header';
import Newslists from './Newslists';
import $ from 'jquery';
import './scss/Newsmain.scss';
import { Modal } from 'antd';
import { LgButton } from 'lancoo-web-ui';
import { getData } from '../../common/js/fetch';
import FlowChart from './flowChart'
import {SKIN_BG_COLOR} from '../../hooks/useGetThem'
import { axiosMethod, getQueryVariable } from "../../common/js/fetch";

class Newsmain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            start: 0,
            skin: 's2'
           
        }
    }
    componentDidMount() {
        document.title = '部门资讯管理'
  
        axiosMethod(sessionStorage.getItem('baseUrl') + 'openapi/v1/system/facade/getSkin', {
            appid: '211',
            token: getQueryVariable('lg_tk'),
          }).then(res => res.json()).then(res => {
            console.log(res)
            if (res.StatusCode == '200') {
              // dispatch({
              //   type: 'SET_SKIN',
              //   data: `s${res.Data.skin}`
              // })
              sessionStorage.setItem('skin', `s${res.Data.skin}`);
              this.setState({
                skin: `s${res.Data.skin}`
              })
            }
          })
    }

    render() {
        let {
            show,
            isModalOpen
        } = this.state
        return (
            <div>
                <Header  headerName={'部门资讯管理'}></Header>
                <div className="Newsmain-div" style={{
                        backgroundColor: SKIN_BG_COLOR[this.state.skin]
                    }}>
                    {
                        sessionStorage.getItem('UserType') === '6'?
                        <FlowChart ></FlowChart>:<FlowChart ></FlowChart>
                    }
                    {/* <div className={show ? 'flow-chart show' : 'flow-chart'} onClick={this.openFlowChart} >
                        <div className={show ? 'show-title' : ''}> 新闻资讯管理流程</div>
                        {
                            show ?
                                <>
                                    <i className='x-icon' onClick={this.closeFlowChart}></i>
                                    <span className='show-span'>
                                        让您一张图预览新闻资讯管理全流程
                                    </span>
                                    <div className='detail_btn' onClick={this.showModal}>了解一下</div>
                                </>
                                : ''
                        }
                        <Modal className='flow-chart-modal' title="新闻资讯管理全流程" visible={isModalOpen} width={1080}
                            footer={null} onCancel={this.handleCancel}>
                            <i className='circle-left'></i>
                            <i className='circle-right'></i>
                            <i className='circle-bottom'></i>
                            <i className='circle-middle'></i>
                            <div className='flow-modal-top'>
                                <span className='tip-title'>新闻资讯管理说明</span>
                                <div className='tip-item'>
                                    <span>管理员可以添加新闻资讯类型、添加/发布/编辑/删除/查看新闻资讯。</span>
                                    <span>非管理员只能查看新闻资讯。</span>
                                    <span>可以通过办公平台首页快速进入新闻资讯模块。</span>
                                </div>
                            </div>
                            <div className='flow-modal-bottom'>
                                <span className='tip-title'>新闻资讯管理应用流程</span>
                                <i className='flow-img'></i>
                                <div className='i-know-btn'>
                                    <LgButton backgroundType='opacification' gradient radius type='info' onClick={this.handleCancel}>我知道了</LgButton>
                                </div>
                            </div>
                        </Modal>
                    </div> */}
                    <Newslists></Newslists>
                </div>
                {/* <Footer></Footer> */}
            </div>
        )
    }
}

export default Newsmain;